<template>
    <div class="pw-box">
        <a-form :model="formdata" ref="formref"  :labelCol="{span:4}" :rules="rules" @finish="tosub" >
            <a-form-item hasFeedback name="password" label="修改密码">
                <a-input type="password" v-model:value="formdata.password" class="text-input" />
            </a-form-item>
            <a-form-item hasFeedback name="repassword" label="确认密码">
                <a-input type="password" v-model:value="formdata.repassword" class="text-input" />
            </a-form-item>
            <a-form-item class="text-center">
                <a-button type="primary" html-type="submit">确认修改密码</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<style lang="less" scoped>
.pw-box{
    max-width: 720px; padding:25px 20px; margin:0 auto;
    .text-input{
        width:320px;
    }
    .text-center{
        text-align: center; padding-right: 200px; padding-top: 30px;
    }
}
</style>
<script>
import { defineComponent, reactive, toRaw,ref } from 'vue';
import { savePw } from '@/api/site';
import { message } from 'ant-design-vue';
 

export default defineComponent({
    setup() {

        const formdata=reactive({
            password:'',
            repassword:'',
        });

        const formref=ref();
        
        
        const checkpw = async (_rules,val) =>{
            if(val.length<6){
                return Promise.reject('不能小于6位');
            }
            return Promise.resolve();
        };

        message.config({top:'220px',duration:1.2});

        const checkrepw = async (_rules,val) =>{
            if(toRaw(formdata).password != val)
            {
                return Promise.reject('密码前后不一');
            }
            return Promise.resolve();
        };

        const rules={
            password:[{required:true,validator:checkpw,trigger:'blur'}],
            repassword:[{required:true,validator:checkpw,trigger:'blur'},{required:true,validator:checkrepw,trigger:'blur'}]
        };

        const tosub= () =>{
            const obj=toRaw(formdata);
            savePw(obj).then(
                res=>{
                    
                    if(res.data['code']==200)
                    {
                        message.success('重设密码成功');
                        formref.value.resetFields();
                    }
                    else{
                        message.error(res.data['msg']);
                    }
                },
                err=>{
                    console.log(err);
                }

            )
        };

        return{
            rules,tosub,formdata,formref
        }

        
    },
})
</script>
